// var rateWrapper = document.getElementsByClassName('rate-wrapper')[0];
// var rateBox = document.getElementsByClassName('rate-box')[0];
//
// // 获取星星的数量
// var wrapperCss = getComputedStyle(rateWrapper);
// var wrapperWidth = wrapperCss.width;
// var wrapperBs = wrapperCss.backgroundSize;
// var num = parseInt(wrapperWidth) / parseInt(wrapperBs);
// var rating = 0;
// var currentStar;
// var step = 0.5;
//
// rateWrapper.addEventListener('mousemove',function (event) {
//   var rateLeft = event.offsetX;
//   // console.log(rateLeft);
//   var width = rateWrapper.offsetWidth;
//   // console.log(width);
//
//   var percent = rateLeft / width;
//   // 整颗星星的逻辑
//   currentStar = Math.ceil(percent*num);
//   // 半颗星星的逻辑  0.5
//   for(var i = 0; ; i+=step){
//     if (i > percent * num){
//       currentStar = i;
//       break;
//     }
//   }
//   //保留一位小数点
//   currentStar = currentStar.toFixed(1);
//
//   rateBox.style.width = currentStar / num * 100 + '%';
//   // 设置data-title
//   rateWrapper.setAttribute("data-title",currentStar + '/' + num);
// });
//
//   rateWrapper.addEventListener('mouseleave',function () {
//     rateBox.style.width = rating / num * 100 + "%";
//   });
//   rateWrapper.addEventListener('click',function () {
//     rating = currentStar;
//   });

// ---------------------------------------------------------------------------
//   三个参数 1.星星大小 2.星星数量 3.展示星星的效果
function initRate(size,num,step) {
  var rateWrapper = document.getElementsByClassName('rate-wrapper')[0];
  var rateBox = document.getElementsByClassName('rate-box')[0];
  //初始化星星
  var step = step || 1;
  rateWrapper.style.backgroundSize = size + 'px';
  rateWrapper.style.height = size + 'px';
  rateWrapper.style.width = size * num + 'px';

  rateBox.style.height = size + 'px';
  rateBox.style.backgroundSize = size + 'px';

  var wrapperCss = getComputedStyle(rateWrapper);
  var wrapperWidth = wrapperCss.width;
  var wrapperBs = wrapperCss.backgroundSize;
  var num = parseInt(wrapperWidth) / parseInt(wrapperBs);
  var rating = 0;
  var currentStar;

  rateWrapper.addEventListener('mousemove',function (event) {
    var rateLeft = event.offsetX;
    var width = rateWrapper.offsetWidth;
    var percent = rateLeft / width;
    // 整颗星星的逻辑
    currentStar = Math.ceil(percent*num);
    // 半颗星星的逻辑  0.5
    for(var i = 0; ; i+=step){
      if (i > percent * num){
        currentStar = i;
        break;}
      }
    currentStar = currentStar.toFixed(1);
    rateBox.style.width = currentStar / num * 100 + '%';
    rateWrapper.setAttribute("data-title",currentStar + '/' + num);
  });
  rateWrapper.addEventListener('mouseleave',function () {
    rateBox.style.width = rating / num * 100 + "%";
  });
  rateWrapper.addEventListener('click',function () {
    rating = currentStar;
  });
}
initRate(50,5,0.1);